<template>
  <a-scrollbar class="stock-group-list" type="track" :style="{ maxHeight: isModal ? '55vh' : 'calc(100vh - 320px)' }" style="overflow-y: auto">
    <template v-for="group in carModelStockState.stockData" :key="group.id">
      <StockItem :data="group" />
    </template>
  </a-scrollbar>
  <br />
  <br />
  <a-empty v-if="carModelStockState.stockData.length == 0" />
</template>

<script lang="ts">
  import { inject, ref } from 'vue'
  import StockItem from './stock-item.vue'
  export default {
    components: {
      StockItem,
    },
    props: {
      isModal: Boolean,
    },
    setup() {
      const carModelStockState = inject('carModelStockState')
      const pickerValue = ref()
      return {
        carModelStockState,
        pickerValue,
      }
    },
  }
</script>

<style lang="less" scoped>
  .stock-group-list {
    height: calc(100vh - 300px);
    overflow-y: auto;
  }
  .stock-group-item {
    border: 1px solid #f2f3f5;
  }
  .car-list {
    display: flex;
    flex-wrap: wrap;
    .car-item {
      width: 104px;
      height: 49px;
      background: #f2f2f3;
    }
  }
</style>
